<template>
  <div>
    <el-card style="margin-bottom: 50px">
      <el-form :model="formData" label-width="100px" :inline="true">
        <el-form-item label="菜单名称">
          <el-input v-model="formData.menuName" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formData.state" placeholder="Select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button @click="handleAdd">
        <IconifyIconOffline :icon="Plus" />
        新增
      </el-button>
      <el-button @click="flod()">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
        >
          <path
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            d="m20 20l-5-5m0 0v4m0-4h4M4 20l5-5m0 0v4m0-4H5M20 4l-5 5m0 0V5m0 4h4M4 4l5 5m0 0V5m0 4H5"
          />
        </svg>
        展开/折叠</el-button
      >
      <pure-table
        :data="tableData"
        :columns="columns"
        row-key="id"
        stripe
        :header-cell-style="{
          background: '#eff2fb',
          color: 'var(--el-text-color-primary)'
        }"
        style="margin-top: 30px"
      >
        <template #state="{ row }">
          <div v-if="row.state == 1">
            <div
              style="
                width: 36px;
                height: 20px;
                font-size: 12px;
                font-weight: 400;
                color: #3bb61b;
                line-height: 16px;
                border: 1px #3bb61b solid;
                padding: 2px;
                text-align: center;
              "
            >
              启用
            </div>
          </div>
          <div v-if="row.state == 2">
            <div
              style="
                width: 36px;
                height: 20px;
                font-size: 12px;
                font-weight: 400;
                color: red;
                line-height: 16px;
                border: 1px red solid;
                padding: 2px;
                text-align: center;
              "
            >
              停用
            </div>
          </div>
        </template>
        <template #operation="{ row }">
          <el-button link type="primary" size="small" @click="handleAdd(row)"
            >新增</el-button
          >
          <el-button link type="primary" size="small" @click="handleUpdate(row)"
            >修改</el-button
          >
          <el-button link type="primary" size="small" @click="handleDelete()"
            >删除</el-button
          >
        </template>
      </pure-table>
      <el-pagination
        class="pagination"
        :current-page="listPageObj.currentPage"
        :page-size="listPageObj.pageSize"
        :page-sizes="[10, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listPageObj.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <AddMenu :title="title" ref="addMenu" />
  </div>
</template>

<script setup lang="ts">
import Plus from "@iconify-icons/ep/plus";
import { ref, reactive, onMounted } from "vue";
import { type PaginationProps } from "@pureadmin/table";
import AddMenu from "./dialog/addMenu.vue";
import { ElMessage, ElMessageBox } from "element-plus";

defineOptions({
  name: "menuManagement"
});

interface Table {
  id: number;
  menuName: string;
  icon: string;
  sort: number;
  URL: string;
  state: number;
  createdTime: string;
  hasChildren?: boolean;
  children?: Table[];
}

const title = ref("新增菜单");
const expandRowKeys = ref([]);
const addMenu = ref(null); //定义子组件
const options = [
  {
    value: "Option1",
    label: "Option1"
  },
  {
    value: "Option2",
    label: "Option2"
  }
];
const listPageObj = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

const tableData: Table[] = [
  {
    menuName: "阿海",
    icon: "xxx",
    sort: 1,
    URL: "http://xxx.com",
    state: 1,
    createdTime: "2023-03-28",
    id: 1
  },
  {
    id: 2,
    menuName: "阿海2",
    icon: "xxx",
    sort: 2,
    URL: "http://xxx.com",
    state: 2,
    createdTime: "2023-03-28",
    children: [
      {
        id: 3,
        menuName: "阿3",
        icon: "xxx",
        sort: 3,
        URL: "http://xxx.com",
        state: 1,
        createdTime: "2023-03-28"
      }
    ]
  }
];

const formData = reactive({
  menuName: "",
  state: ""
});

const columns: TableColumnList = [
  {
    label: "菜单名称",
    prop: "menuName"
  },
  {
    label: "图标",
    prop: "icon"
  },
  {
    label: "排序",
    prop: "sort"
  },
  {
    label: "URL",
    prop: "URL"
  },
  {
    label: "状态",
    prop: "state",
    slot: "state"
  },
  {
    label: "创建时间",
    prop: "createdTime"
  },
  {
    label: "操作",
    fixed: "right",
    slot: "operation"
  }
];

const pagination = reactive<PaginationProps>({
  total: 0,
  pageSize: 10,
  currentPage: 1,
  background: true
});

function handleSizeChange(val: number) {
  console.log(`${val} items per page`);
}

function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`);
}

function handleSelectionChange(val) {
  console.log("handleSelectionChange", val);
}
function flod() {
  if (expandRowKeys.value.length == 0) {
    expandRowKeys.value = this.tableData.map(item => {
      return item.id;
    });
  } else {
    expandRowKeys.value = [];
  }
}
function handleAdd(row = {}) {
  title.value = "新增菜单";
  addMenu.value.dialogVisible = true;
  console.log("row", row);
}
function handleUpdate(row) {
  title.value = "编辑菜单";
  addMenu.value.dialogVisible = true;
  console.log("row", row);
}
const handleDelete = () => {
  ElMessageBox.confirm("是否删除该目录", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};

onMounted(() => {});
</script>

<style scoped>
.pagination {
  justify-content: flex-end !important;
  margin-top: 30px;
}
</style>
